import React, { useState } from 'react';
import { Layout, Space, Button, Table } from 'antd';
import Sidebar from './components/Sidebar';
import Header from './components/Header';
import Breadcrumb from './components/Breadcrumb';
import ContentArea from './components/ContentArea';

const { Footer } = Layout;

const TodoList = () => {
  const [collapsed, setCollapsed] = useState(false);
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState('');

  const handleAddTask = () => {
    if (newTask.trim() !== '') {
      setTasks([...tasks, { id: Date.now(), text: newTask, completed: false }]);
      setNewTask('');
    }
  };

  const handleToggleTask = (id) => {
    setTasks(
      tasks.map(task =>
        task.id === id ? { ...task, completed: !task.completed } : task
      )
    );
  };

  const handleDeleteTask = (id) => {
    setTasks(tasks.filter(task => task.id !== id));
  };

  const handleCompleteTask = (id) => {
    setTasks(
      tasks.map(task =>
        task.id === id ? { ...task, completed: true } : task
      )
    );
  };

  const handleUndoTask = (id) => {
    setTasks(
      tasks.map(task =>
        task.id === id ? { ...task, completed: false } : task
      )
    );
  };

  const completedTasks = tasks.filter(task => task.completed);
  const incompleteTasks = tasks.filter(task => !task.completed);

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sidebar collapsed={collapsed} setCollapsed={setCollapsed} />
      <Layout className="site-layout">
        <Header />
        <ContentArea>
          <Breadcrumb />
          <Space style={{ marginBottom: 16 }}>
            <ContentArea.Search
              placeholder="Add a new task"
              allowClear
              enterButton="Add Task"
              size="large"
              value={newTask}
              onChange={(e) => setNewTask(e.target.value)}
              onSearch={handleAddTask}
            />
          </Space>
          <h2>未完成的任务</h2>
          <Table
            columns={[
              {
                title: 'Task',
                dataIndex: 'text',
                key: 'text',
                render: (text, record) => (
                  <span
                    style={{ textDecoration: record.completed ? 'line-through' : 'none' }}
                    onClick={() => handleToggleTask(record.id)}
                  >
                    {text}
                  </span>
                ),
              },
              {
                title: 'Action',
                key: 'action',
                render: (_, record) => (
                  <Space size="middle">
                    <Button type="primary" onClick={() => handleCompleteTask(record.id)}>
                      处理
                    </Button>
                    <Button type="link" danger onClick={() => handleDeleteTask(record.id)}>
                      删除
                    </Button>
                  </Space>
                ),
              },
            ]}
            dataSource={incompleteTasks}
            rowKey="id"
          />
          <h2>已完成的任务</h2>
          <Table
            columns={[
              {
                title: 'Task',
                dataIndex: 'text',
                key: 'text',
                render: (text, record) => (
                  <span
                    style={{ textDecoration: record.completed ? 'line-through' : 'none' }}
                    onClick={() => handleToggleTask(record.id)}
                  >
                    {text}
                  </span>
                ),
              },
              {
                title: 'Action',
                key: 'action',
                render: (_, record) => (
                  <Space size="middle">
                    <Button type="primary" onClick={() => handleUndoTask(record.id)}>
                      撤回
                    </Button>
                    <Button type="link" danger onClick={() => handleDeleteTask(record.id)}>
                      删除
                    </Button>
                  </Space>
                ),
              },
            ]}
            dataSource={completedTasks}
            rowKey="id"
          />
        </ContentArea>
        <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
      </Layout>
    </Layout>
  );
};

export default TodoList;